<template>
  <div ref="section" :style="{width: '100%', height: '320px'}"></div>
</template>

<script setup name="Section">

import * as echarts from 'echarts';
import { sectionData } from '@/api/coal/realtimeData';

//import 'echarts-gl';
const section = shallowRef({})
const myChart = shallowRef({})
let flushSection = ref<String>("");

const props = defineProps({
  deviceId: {
    type: Number,
    default: null,
  },
})

const selfName = ref('')
const selfXData = ref([])
const selfYData = ref([])

function getData(){
  selfXData.value = []
  selfYData.value = []
  for(let i = 0; i <= 200; i+=5){
    selfXData.value.push(i)
    selfYData.value.push(50+Math.floor(Math.random() * 350))
  }
}

onMounted(() => {
  const resizeOb = new ResizeObserver((entries) => {
    for (const entry of entries) {
      echarts.getInstanceByDom(entry.target).resize();
    }
  })
  resizeOb.observe(section.value)
  initChart()

  flushSection = setInterval(()=>{

    // 根据设备id查询折线图数据
    initCharData().then(resp=>{
      myChart.value.setOption({
        xAxis: {
          data: selfXData.value,
        },
        series: [
          {
            data: selfYData.value
          },]
      })
    })
  },1000)
})

function initChart() {
  nextTick(() => {
    myChart.value = echarts.init(section.value)
    initCharData().then(resp=>{
      initOption();
    })
  })
}

function initCharData(){
  return sectionData(props.deviceId).then(resp => {
    selfXData.value = resp.xPoint
    selfYData.value = resp.yPoint
    selfName.value =  '厚度'
  })
}

function initOption(){
  let option = {
    animation: false,
    title: {
      text: '单位：cm'
    },
    toolbox: {
      feature: {
        saveAsImage: {
          name: "煤流厚度截面图"
        }
      }
    },
    tooltip: {
      trigger: 'axis',
    },
    grid: { //调整图表上下左右位置
      top:'15%',
      left: '3%',
      right: '5%',
      bottom: '3%',
      containLabel: true
    },

    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: selfXData.value,
      axisLabel : {
        showMaxLabel: true,
        interval : 'auto',
        rotate : 0
      },
    },
    yAxis: {
      type: 'value',
      boundaryGap: [0, '100%'],
      max: 60,
    },

    series: [
      {
        name: selfName.value,
        type: 'line',
        smooth: true,
        symbol: 'none',
        sampling: 'lttb',
        itemStyle: {
          color: 'rgb(255, 70, 131)'
        },
        data: selfYData.value,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(255, 158, 68)'
            },
            {
              offset: 1,
              color: 'rgb(255, 70, 131)'
            }
          ])
        },
        markLine: {
          data: [
              {type: 'min', name: '最小值',yAxis: 5},
              {type: 'max', name: '最大值',yAxis: 40},
              ]
        }
      },
    ]
  };
  myChart.value.setOption(option)

}

//随着屏幕大小调节图表
window.addEventListener("resize", () => {
  myChart.value.resize()
});

onBeforeUnmount(() => {
  clearInterval(flushSection)
})

</script>
